<template>
	<view class="detail-content">
		<up-navbar title="" bgColor="#fff" :fixed="false" class="navbar">	
		  <template #right>
			   <up-icon
				   name="star"
				   size="20"
			   ></up-icon>
			   <up-icon
				   name="search"
				   size="20"
				   @click="jump('search')"
			   ></up-icon>
			   <up-icon
				   name="shopping-cart"
				   size="20"
				   @click="jump('shopping-cart')"
			   ></up-icon>
		  </template>	
		</up-navbar>
		<view class="detail-class-box">
			<view>
				<image class="detail-bg" :src="detail.value?.courseCover"></image>
				<image class="class-vip-icon" src="/static/image/vip.png"></image>
			</view>
			<view>
				<view class="class-title u-line-2">
					{{detail.value?.courseName}}
				</view>
				<view class="class-desc u-line-2">{{detail.value?.bizCourseDetail?.description}}</view>
				<view class="class-price">会员专享  ¥{{detail.value?.discountPrice}}</view>
			</view>
		</view>
		<view class="detail-tabbar">
			<up-tabs :list="tabList" @click="changeTab" :current="current"></up-tabs>
		</view>
		<view class="detail-list" :style="'height:'+listHeight+'px'">
			<block v-if="current=== 0">
				<detail-card :list="detail.value?.bizCourseChapters"></detail-card>
			</block>
			<block v-else>
				<download-card :list="detail.value?.bizCourseAttachments"></download-card>
			</block>
		</view>
		<view class="detail-footer">
			<view @click="toShopping">加入购物车</view>
			<view @click="toBuy">立即购买</view>
		</view>
	</view>
</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from 'vue'
import {getDetail} from '../../api/detail.js'
import detailCard from '@/components/class_detail/detail_card.vue'
import downloadCard from '@/components/class_detail/download_card.vue'
const tabList = [
	{name: '目录'},
	{name: '下载笔记代码'}
]
const current = ref(0)
const listHeight = ref(0)
const courseId = ref('')
const detail = reactive({})
const changeTab = (item) => {
	current.value = item.index
}
const jump = (tag) => {
	if (tag === 'search') {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	if (tag === 'shopping-cart') {
		uni.navigateTo({
			url: '/pages/shopping/index'
		})
	}
}
const toShopping = () => {
	uni.navigateTo({
		url: '/pages/shopping/index'
	})
}
onMounted(async ()=> {
	let pages = getCurrentPages()
	courseId.value = pages[pages.length - 1].options.courseId
	let res = await getDetail({courseId: courseId.value})
	if (res.data.data){
		detail.value = res.data.data
	}
	nextTick(()=>{
		let sumH = 0
		let navBar = uni.createSelectorQuery().select('.navbar')
		navBar.boundingClientRect((res)=>{
			sumH+= res.height
		}).exec()
		let classBox = uni.createSelectorQuery().select('.detail-class-box')
		classBox.boundingClientRect((res)=>{
			sumH+= res.height
		}).exec()
		let tabBar = uni.createSelectorQuery().select('.detail-tabbar')
		tabBar.boundingClientRect((res)=>{
			sumH+= res.height
		}).exec()
		let footer = uni.createSelectorQuery().select('.detail-footer')
		footer.boundingClientRect((res)=>{
			sumH+= res.height
		}).exec()
		// 获取可视区域的高度
		uni.getSystemInfo({
			success(res){
				listHeight.value = res.windowHeight - sumH
				console.log(listHeight.value,'height')
			}
		})
	})
})
</script>

<style lang="scss">
.detail-content{
	::v-deep .u-icon{
		margin-left: 20rpx;
	}
	.detail-class-box{
		display: flex;
		padding: 10rpx 20rpx;
		>view:nth-child(1) {
			position: relative;
			.detail-bg{
				border-radius: 10rpx;
				width: 300rpx;
				height: 200rpx;
			}
			.class-vip-icon{
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		>view:nth-child(2) {
			margin-left: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.class-title{
				font-size: 35rpx;
				font-weight: 700;
			}
			.class-desc{
				color: #d2d2d2;
			}
			.class-price{
				color: #ea5b6d;
			}
		}
	}
	::v-deep .u-tabs__wrapper__nav__item{
		flex: 1;
	}
	.detail-list{
		overflow: auto;
		background-color: #f7f8fb;
	}
	.detail-footer{
		display: flex;
		justify-content: space-around;
		padding: 30rpx;
		background-color: #fff;
		border-top: 1px solid #fffdfa;
		>view{
			color: #fff;
			width: 250rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
			font-size: 28rpx;
		}
		>view:nth-child(1) {
			background: linear-gradient(to right,#f1b34a,#ef9a44);
		}
		>view:nth-child(2) {
			background: linear-gradient(to right,#e55c58,#da3c31);
		}
	}
}	
</style>